<div class="row">
    <div class="col-xs-12">
        <div class="box">
            <div class="box-header">
                <h3 class="box-title">订单查询 -> 订单商品</h3>

                <div class="box-tools">

                    <div class="input-group input-group-sm " style="width: 438px;">
                        <button type="button" class="btn btn-default btn-return-order">返回订单查询</button>
                        <input type="text" name="table_search" id="searchNameId"
                               class="form-control pull-right" placeholder="商品名称" style="width: 250px;"/>
                        <div class="input-group-btn">
                            <button type="button" class="btn btn-default btn-search">
                                <i class="fa fa-search"></i>
                            </button>
                            <button type="button" class="btn btn-default btn-update ">修改</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
                <table class="table table-hover">
                    <thead>
                    <tr>
                        <th>选择</th>
                        <th>商品名称</th>
                        <th>商品配置</th>
                        <th>商品颜色</th>
                        <th>商品折扣价</th>
                        <th>购买数量</th>
                        <th>创建时间</th>
                        <th>修改时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="tbodyId"></tbody>
                </table>
            </div>
            <div id="pageId" class="box-footer clearfix">
            </div>
            <!-- /.box-body -->
        </div>
        <!-- /.box -->
    </div>
</div>
<script type="text/javascript">

    //分页浏览功能
    $(document).ready(function () {
        $("#pageId").load("/modules/common/page.html", doGetObjects); //执行方法查询数据加载页面
        $(".input-group-sm")
            .on("click", ".btn-return-order", doReturnOrder)       //返回订单页
            .on("click", ".btn-search", doQueryObjects)    //搜索方法
            .on("click", ".btn-add,.btn-update", doLoadEditUI);	//跳转到编辑页面
        $("tbody").on("click", ".btn-delete", doDeleteById);		//删除按钮方法
    });

    //返回商品页面
    function doReturnOrder(){
        let orderUrl = "/modules/sys/order_list.html";
        $("#mainContentId").load(orderUrl);
    }

    //跳转到编辑页面
    function doLoadEditUI() {
        let id = doGetCheckedId();
        if (!id) {	//如果没选择用户
            alert("请先选择");
            return;
        }
        let editUrl = "/modules/sys/order_sub_edit.html"
        let findByIdUrl = `${baseUrl}/shoppingback/ddSubOrderInfo/${id}`;
        $.ajax({
            url: findByIdUrl, crossDomain: true, xhrFields: {withCredentials: true},
            headers : {"Authorization": "Bearer " + window.localStorage.getItem("accessToken")},
            success(result) {//JsonResult
                if (result.success) {
                    if(result.status==401){
                        alert(result.msg);
                        return;
                    }
                    if(result.status==403){
                        alert(result.msg);
                        return;
                    }
                    $("#mainContentId").data("rowData", result.data); //加载数据到页面
                    $("#mainContentId").load(editUrl, () => $(".box-title").html("订单明细修改")) //赋予url到修改用户
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    //点击id选择用户
    function doGetCheckedId() {
        return $("tbody input[name='radioId']:checked").val();
    }

    //删除按钮
    function doDeleteById() {
        if (!confirm("确定删除该订单明细?")) {
            return;
        }
        let rowData = $(this).parents("tr").data("rowData"); //根据点击对象获取用户的数据
        let id = rowData.id;
        let url = `${baseUrl}/shoppingback/ddSubOrderInfo/${id}`;
        //todo 后期添加权限后再开启
        alert("不允许删除");return;
        $.ajax({
            method: "delete",
            url: url,
            headers: {"Authorization": "Bearer " + window.localStorage.getItem("accessToken")},
            crossDomain: true,
            xhrFields: {withCredentials: true},
            success(result) {
                if(result.status==401){
                    alert(result.msg);
                    return;
                }
                if(result.status==403){
                    alert(result.msg);
                    return;
                }
                if (result.success) {
                    alert(result.msg);
                    doGetObjects();
                } else {
                    alert(result.msg);
                }
            }
        });
    }

    //页面加载完成异步加载当前页数据
    function doGetObjects() {
        let url = `${baseUrl}/shoppingback/ddSubOrderInfo`;
        let pageNum = $("#pageId").data("pageNum");
        if (!pageNum) pageNum = 1;
        let params = {"pageNum": pageNum};
        params.query = $("#searchNameId").val().trim();
        params.orId = $("#mainContentId").data("orId");
        $.ajax({
            url: url, data: params, crossDomain: true, xhrFields: {withCredentials: true},
            headers : {"Authorization": "Bearer " + window.localStorage.getItem("accessToken")},
            success(result) {
                if(result.status==401){
                    alert(result.msg);
                    return;
                }
                if(result.status==403){
                    alert(result.msg);
                    return;
                }
                doHandleQueryResponseResult(result);
            }
        });
    }

    //处理搜索框结果
    function doHandleQueryResponseResult(result) {
        if (result.success) {
            doSetTableBodyRows(result.data.rows);
            doSetPagination(result.data);
        } else {
            alert(result.msg);
        }
    }

    //通过服务端返回的数据初始化页面
    function doSetTableBodyRows(data) {
        //1.获取tbody对象，并清空内容
        let tBody = $("#tbodyId");
        tBody.empty();
        //2.迭代data内容将数据追加到tbody中
        data.forEach(item => {
            let tr = $("<tr></tr>");
            tr.data("rowData", item);
            let tds = doCreateTds(item);
            tr.append(tds);
            tBody.append(tr);
        });
    }

    function doCreateTds(row) {
        return `<td><input type='radio' name='radioId' value='${row.id}' ></td>
         <td>${row.pdName}</td>
         <td>${row.pdVersion}</td>
	     <td>${row.color}</td>
	     <td>${row.actualPrice}</td>
         <td>${row.num}</td>
	     <td>${getFormatDate2(row.createTime)}</td>
	     <td>${getFormatDate2(row.updateTime)}</td>
         <td><button type='button' class='btn btn-default btn-delete'>删除</button></td>`;
    }

    function getFormatDate2(time) {
        var nowDate = new Date(time);
        var year = nowDate.getFullYear();
        var month = nowDate.getMonth() + 1 < 10 ? "0" + (nowDate.getMonth() + 1) : nowDate.getMonth() + 1;
        var date = nowDate.getDate() < 10 ? "0" + nowDate.getDate() : nowDate.getDate();
        var hour = nowDate.getHours() < 10 ? "0" + nowDate.getHours() : nowDate.getHours();
        var minute = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
        var second = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
        return year + "年" + month + "月" + date + "日" + hour + ":" + minute + ":" + second;
    }
</script>




